﻿/**
    X光图仿真模拟插件
    依赖：jQuery
*/
;
$.extend({
    superimposedCarousel: function (cfg) {
        var superimposedCarouselObj = {
            //初始化
            init: function (config) {
                config = $.extend({
                    container: {},  //承载插件的容器（jQuery Dom对象），需要具有width、height值 
                    dataArr:[],      //放数据的arr
                    isAlarm:true
                }, config);

                var thiz = this;
                thiz.config = config;
                //初始化dom
                thiz.initDom();
                return thiz;
            },
            //初始化dom
            initDom: function () {
                var thiz = this,
                    dataArr = thiz.config.dataArr,
                    len = dataArr.length;
                var imgBox = $("<ul class='rightImgBox'></ul>");
                thiz.imgBox = imgBox;
                thiz.config.container.append(imgBox);
                if(len != 0){
                    $.each(dataArr,function(i, obj){
                        var li = "<li><img src='" + obj + "'  /></li>";
                        thiz.imgBox.append(li);
                    }); 
                    thiz.initEvents();
                }
                // 轮播图动态样式
                var $carouseLi = thiz.getCarouseLi();
                // 基数
                var baseInfo = {
                    left: 20,
                    top: 16 
                };
                // 偏移量
                var offset = {
                    left: 3,
                    top: 4
                };
                    
                $carouseLi.each(function(i, obj) {
                    var $this = $(this);
                    $this.css({
                        zIndex: $carouseLi.length - (i + 1),
                        left:baseInfo.left + offset.left * i + '%',
                        top: baseInfo.top + offset.top * i + '%'
                    }).attr('data-index', i);
                });

            },
            // 获取轮播的li的dom
            getCarouseLi() {
                return this.config.container.find("li");
            },
            //初始化事件
            initEvents: function () {
                var thiz = this,
                    li = thiz.config.container.find("li");
                if(thiz.config.isAlarm){ //报警
                    if(li.length == 1){
                        var rightImgBoxW = thiz.imgBox.width(),
                        rightImgBoxH = thiz.imgBox.height(),
                        liW = li.width(),
                        liH = li.height();
                        li.css({
                            position:"absolute",
                            left:((rightImgBoxW - liW)/2) + "px",
                            top:((rightImgBoxH - liH)/2) + "px"
                        });
                    }else{
                        thiz.carouselAndDetail();
                    }
                }else{
                   thiz.noAlarm(); //没有报警
                }
                
            },
            // 轮播和详情页
            carouselAndDetail: function () {
                var thiz = this;

                // 图片点击进入详情
                layui.use('layer', function() {
                    var $tabLi = thiz.config.container.find("li");
                    var tabLen = $tabLi.length;
                    $tabLi.on('click', function() {
                        var $this = $(this);
                        var zIndex = $this.css('zIndex');
                        
                        if(tabLen > 1){
                            if (zIndex == tabLen - 1) {
                                thiz.showDetail($this);
                            }
                            else {
                                var changeIndex = thiz.getChangeIndex('next', $this);
                                thiz.changeCarousel(changeIndex);
                            }
                        }else if(tabLen == 1){ //只有一张图时直接显示详情页
                            thiz.showDetail($this);    
                        }
                        
                    });

                    // 轮播图上/下张
                    $(document).on('keyup', function (event) {
                        var keyCode = event.which || event.keyCode;
                        switch (keyCode) {
                            case 37:    // 左箭头
                                var changeIndex = thiz.getChangeIndex('prev');
                                thiz.changeCarousel(changeIndex);
                                break;
                            case 38:    // 上箭头
                                break;
                            case 39:    // 右箭头
                                var changeIndex = thiz.getChangeIndex('next');
                                thiz.changeCarousel(changeIndex);
                                break;
                            case 40:    // 下箭头
                                break;
                            default:
                                break;
                        }
                    });
                });
            },
            // 根据类型/dom获取changeIndex
            getChangeIndex: function (type, $this) {
                var thiz = this;
                var changeIndex = 0;
                var $courseLi = thiz.getCarouseLi();
                switch (type) {
                    case 'prev':    // 上一张
                        changeIndex = thiz.getPrev();
                        break;
                    case 'next':    // 下一张
                        changeIndex = thiz.getNext();
                        break;
                    default:
                        if ($this) {
                            var thisIndex = $this.data('index');
                            $courseLi.each(function (index, dom) {
                                var $dom = $(dom);
                                var domIndex = $dom.data('index');
                                if (thisIndex === domIndex) {
                                    changeIndex = index;
                                }
                            });
                        }
                        break;
                }
                return changeIndex;
            },
            // 切换轮播图z-index
            changeCarousel: function(changeIndex) {
                var thiz = this;

                // 轮播切换
                var $now = thiz.findNowCarousel();
                var nowIndex = $now.data('index');

                // 获取要改变的dom
                var $courseLi = thiz.getCarouseLi();
                var $change = $courseLi.eq(changeIndex);

                // 原来的值缓存
                var nowLeft = $now[0].style.left;
                var nowTop = $now[0].style.top;
                var nowZIndex = $now.css('zIndex');
                var changeLeft = $change[0].style.left;
                var changeTop = $change[0].style.top;
                var changeZIndex = $change.css('zIndex');

                // 单个宽度
                var width = $now.width();
                // 动画时间
                var speed = 600;

                // 开始动画前，先隐藏其他的，并显示当前需要活动的
                // thiz.resetCarousel($courseLi, nowZIndex, changeZIndex);

                $now.stop().animate({left: -.3 * width}, speed, function () {
                    $now.css({
                        zIndex: changeZIndex
                    }).animate({
                        left: changeLeft,
                        top: changeTop
                    }, speed);
                });

                $change.stop().animate({left: 1.3 * width}, speed, function () {
                    $change.css({
                        zIndex: nowZIndex
                    }).animate({
                        left: nowLeft,
                        top: nowTop
                    }, speed);
                })
            },
            // 获取上一个轮播图
        getPrev() {
                var thiz = this;
                var $now = thiz.findNowCarousel();
                var nowIndex = $now.data('index');
                var $courseLi = thiz.getCarouseLi();
                var courseLen = $courseLi.length;
                return nowIndex === 0 ? courseLen - 1 : nowIndex - 1;
            },
            // 获取下一个轮播图
            getNext() {
                var thiz = this;
                var $now = thiz.findNowCarousel();
                var nowIndex = $now.data('index');
                var $courseLi = thiz.getCarouseLi();
                var courseLen = $courseLi.length;
                return nowIndex === courseLen - 1 ? 0 : nowIndex + 1;
            },
            // 当前轮播图
            findNowCarousel: function () {
                var thiz = this;
                var $carouseLi = thiz.getCarouseLi();
                var $now;
                $carouseLi.each(function(i, obj) {
                    var $obj = $(obj);
                    var zIndex = $obj.css('zIndex');
                    if (+zIndex == $carouseLi.length - 1) {
                        $now = $obj;
                    }
                });
                return $now;
            },
            /* //没有报警
            noAlarm:function(){
                var thiz = this;
                if(!thiz.config.isAlarm){ //没有报警
                    $(".rightDown").css("border","none");
                    $("#tabPic").hide();
                    var videoList = $(".videoList").clone();
                    $(".monitor").addClass("noMonitor").find(".videoList").remove();
                    $(".rightBox").addClass("noMonitorRightBox");
                    $(".rightDown").append(videoList);
                    videoList.addClass("rightVideo");
                }else{
                    $(".rightDown").css("border","1px solid #ccc");
                    $(".monitor").removeClass("noMonitor");
                    $(".topPic").removeClass(".noMonitorTopPic");
                    $(".rightBox").removeClass("noMonitorRightBox");
                    var videoListHtml = $(".rightVideo").clone().remove();
                    $(".leftBox").append(videoListHtml);
                }
            }, */
            // 展示详情
            showDetail: function($this) {
                $.get('./alarmMonitorDetail.html', {}, function(str) {
                    $this.attr('method', 'offset');
                    $this.attr('type', 'auto');
                    var method = $this.attr('method');
                    var type = $this.attr('type');
                    layer.open({
                        type: 1,
                        offset: type,
                        title: ['详情页'],
                        id: 'tabPic' + type,    // 防止重复弹出
                        content: str,
                        btn: false,
                        btnAlign: 'c',          // 按钮居中
                        shade: 1,               // 不显示遮罩
                        yes: function() {
                            layer.closeAll();
                        },
                        area: ['1000px']
                    });
                });
            }
        };

        return $.extend({}, superimposedCarouselObj).init(cfg);
    }
});
